import Icon from './types'

export type DirectionIconProps = {
  direction?: 'left' | 'right' | 'top' | 'bottom'
}

const rotateDeg: Record<string, string> = {
  left: '90deg',
  right: '-90deg',
  top: '180deg',
  bottom: '0',
}

const Direction: Icon & DirectionIconProps = ({
  className,
  direction = 'bottom',
  ...props
}) => (
  <svg
    className={`icon ${className || ''}`}
    viewBox="0 0 1024 1024"
    version="1.1"
    xmlns="http://www.w3.org/2000/svg"
    p-id="1476"
    width="1em"
    height="1em"
    {...props}
    style={{
      transform: `rotate(${rotateDeg[direction]})`,
    }}
  >
    <path
      d="M512.077 766.295c3.455 0.192 6.816-0.288 9.888-1.536 2.112-0.672 4.032-1.824 5.663-3.456l459.533-459.533c2.304-2.304 3.648-5.182 4.223-8.449 2.016-8.543-0.96-18.719-8.543-26.399-7.583-7.583-17.856-10.56-26.399-8.543-3.263 0.576-6.143 1.92-8.449 4.223l-436.014 435.823-435.919-435.919c-2.304-2.304-5.182-3.648-8.449-4.223-8.543-2.016-18.719 0.96-26.399 8.543-7.583 7.583-10.56 17.856-8.543 26.399 0.576 3.263 1.92 6.143 4.223 8.449l459.438 459.438c1.536 1.536 3.263 2.592 5.28 3.359 3.072 1.44 6.72 2.016 10.463 1.824z"
      fill="currentColor"
      p-id="1046"
    ></path>
  </svg>
)

export default Direction
